<template>
  <div class="login" :style="'background-image:url('+ Background +');'">
    <el-form ref="loginForm" :model="dataForm" :rules="loginRules" label-position="left" label-width="0px" class="login-form">
      <h3 class="title">
        逸晨博客后台管理系统
      </h3>
      <el-form-item prop="username">
        <icon-svg name="user" class="form-icon"></icon-svg>
        <el-input v-model="dataForm.userName" type="text" auto-complete="off" placeholder="账号">

        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <icon-svg name="password" class="form-icon"></icon-svg>
        <el-input v-model="dataForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin">

        </el-input>
      </el-form-item>
      <el-form-item prop="code">
        <icon-svg name="validCode" class="form-icon"></icon-svg>
        <el-input v-model="dataForm.captcha" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter.native="handleLogin">

        </el-input>
        <div class="login-code">
          <img style="width: 100%" :src="captchaPath" @click="getCaptcha">
        </div>
      </el-form-item>
      <el-checkbox v-model="dataForm.rememberMe" style="margin:0 0 25px 0;">
        记住我
      </el-checkbox>
      <el-form-item style="width:100%;">
        <el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="dataFormSubmit">
          <span v-if="!loading">登 录</span>
          <span v-else>登 录 中...</span>
        </el-button>
      </el-form-item>
    </el-form>
    <!--  底部  -->
    <!--<div v-if="$store.state.settings.showFooter" id="el-login-footer">
      <span v-html="$store.state.settings.footerTxt" />
      <span> ⋅ </span>
      <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">{{ $store.state.settings.caseNumber }}</a>
    </div>-->
  </div>
</template>

<script>
import { getUUID } from '@/utils'
import Background from '@/assets/images/background.jpeg'
export default {
  name: 'Login',
  data() {
    return {
      Background: Background,
      captchaPath: '',
      cookiePass: '',
      dataForm: {
        userName: '',
        password: '',
        uuid: '',
        captcha: '',
        rememberMe:''
      },
      loginRules: {
        userName: [{ required: true, trigger: 'blur', message: '用户名不能为空' }],
        password: [{ required: true, trigger: 'blur', message: '密码不能为空' }],
        captcha: [{ required: true, trigger: 'change', message: '验证码不能为空' }]
      },
      loading: false,
      redirect: undefined
    }
  },

  created () {
    this.getCaptcha()
  },
  methods: {

    // 提交表单
    dataFormSubmit () {
      this.$refs['loginForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl('/sys/login'),
            method: 'post',
            data: this.$http.adornData({
              'username': this.dataForm.userName,
              'password': this.dataForm.password,
              'uuid': this.dataForm.uuid,
              'captcha': this.dataForm.captcha
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$cookie.set('token', data.token)
              this.$router.replace({ name: 'home' })
            } else {
              this.getCaptcha()
              this.$message.error(data.msg)
            }
          })
        }
      })
    },
    // 获取验证码
    getCaptcha () {
      this.dataForm.uuid = getUUID()
      this.captchaPath = this.$http.adornUrl(`/captcha.jpg?uuid=${this.dataForm.uuid}`)
    }

  }
}
</script>

<style rel="stylesheet/scss" lang="scss">

  .login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-size: cover;
  }
  .title {
    margin: 0 auto 30px auto;
    text-align: center;
    color: #707070;
  }

  .login-form {
    border-radius: 6px;
    background: #ffffff;
    width: 385px;
    padding: 25px 25px 5px 25px;
    position: relative;
    .form-icon{
      width: 1em;
      height: 1em;
      position: absolute;
      left: 3px;
      z-index: 999;
      top: 13px;
    }
    .el-input {
      height: 38px;

      input {
        padding: 0 21px;
        height: 38px;
      }
    }
    .input-icon{
      height: 39px;width: 14px;margin-left: 2px;
    }
  }
  .login-tip {
    font-size: 13px;
    text-align: center;
    color: #bfbfbf;
  }
  .login-code {
    width: 33%;
    display: inline-block;
    height: 38px;
    float: right;
    img{
      cursor: pointer;
      vertical-align:middle
    }
  }
</style>
